<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    .bg {
        height: 100%;
        width: 100%;
        background-image: url(../jpg/背景图.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0.2;
        float: none;
        position:absolute;
    }

    .fork {
        height: 20px;
        width: 20px;
        margin-top: 20px;
        margin-left: 20px;

    }

    /* 上半部分 */
    .top {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #505050;
        font-size: 30px;
        margin-top: 50px;
    }

    .top>img {
        height: 50px;
        width: 50px;
        z-index: 100;
    }

    .top1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        color: #505050;
        font-size: 20px;
        margin-top: -30px;
        letter-spacing: 5px;
    }

    .login {
        height: 40px;
        width: 280px;
        background-color: #33b17b;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        font-size: 17px;
        color: white;
        text-align: center;
        line-height: 40px;
        margin-top: 40px;
    }

    .register {
        height: 40px;
        width: 280px;
        background-color: white;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        font-size: 17px;
        color: #33b17b;
        text-align: center;
        line-height: 40px;
        margin-top: 20px;
    }

    /* 其他方式登录 */
    .other{
        margin-top: 260px;
        margin-left: 30px;
    }
    .line {
        display: inline-block;
        width: 30%;
        border-top: 1px solid rgb(155, 152, 152);
    }
    .text{
        color: #686868;
        vertical-align: -4px;
    }
    .bottom{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content:flex-start;
    }
    .logo1{
        height: 20px;
        width: 20px;
        margin-top: 20px;
        margin-left: 35px;
    }
    .text2{
        height: 30px;
        color: #505050;
        font-size:20px;
        text-align:center;
        margin-left: 30px;
    }
</style>

<body>
    <div class="bg"></div>
    <div style="position: relative;">
        <img class="fork" src="../jpg/关闭.png">
        <!-- 上半部分 -->
        <div class="top">
            <img class="logo" src="../jpg/网易云课堂.png">
            <p>网易云课堂</p>
        </div>
        <div class="top1">
            <p>顶尖互联网教育平台</p>
            <div class="login">
                <span>手机号登录</span>
            </div>
            <div class="register">
                <span>注册</span>
            </div>
        </div>
        <!-- 其他方式登录 -->
        <div class="other">
            <span  class="line"></span>
            <span class="text">其他方式登录</span>
            <span  class="line"></span>
        </div>
        <div class="bottom">
                <div >
                    <img class="logo1" src="../jpg/网易.png" >
                    <p class="text2">网易</p>
                </div>
                <div>
                    <img class="logo1" src="../jpg/QQ.png" >
                    <p class="text2">QQ</p>
                </div>
                <div>
                    <img class="logo1" src="../jpg/微信.png" >
                    <p class="text2">微信</p>
                </div>
                <div>
                    <img class="logo1" src="../jpg/微博.png" >
                    <p class="text2">微博</p>
                </div>
                <div>
                    <img class="logo1" src="../jpg/人人网.png" >
                    <p class="text2">人人</p>
                </div>
        </div>


    </div>


</body>

</html>